<template>
  <!-- 自动生成试题 -->
  <div id="auto-select-template" class="jx-content">
    <el-dialog :modal-append-to-body="false" v-if="xiangQing" width="900px" class="dialog-chapter-details" title="章节详情" :visible.sync="dialogXiangqing">
      <div class="dialog-content" style="height:420px;padding-bottom:30px;;">
        <el-scrollbar :native="false">
          <div class="dialog-box chapter-details-box">
            <div class="dialog-item muban-content" style="border:none;">
              <div class="muban-title">章节分数分配列表</div>
              <div class="muban-item chapter-details-item" v-for="(item,index) in xiangQing.content" :key="index">
                <div class="chapter-details-name" :title="item.name">{{ item.name }} </div>
                <div class="chapter-details-score">{{ item.content.map(obj => obj.count*obj.score).reduce((total,num) => total+num) }}分</div>
                <div v-for="(item2,index2) in item.content" :key="index2">
                  {{ item2.typeName }} {{ item2.count }} 题
                </div>
              </div>
              <div class="muban-score">试卷总分数：{{ xiangQing.score }}分</div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </el-dialog>
    <el-dialog  :close-on-click-modal="false" :width="dialogModalSwitch?'1200px':'600px'" class="dialog-modal" title="添加模板" :visible.sync="dialogModal">
      <div class="dialog-content">
        <div class="switch-box" :class="{ 'switch-box-true': !dialogModalSwitch }">
          <el-switch @change="switchClick" v-model="dialogModalSwitch" inactive-text="按章节选择"></el-switch>
        </div>
        <div class="dialog-box">
          <div class="dialog-item" :class="{ 'item-bg': dialogModalSwitch }">
            <el-form ref="form" label-width="">
              <!-- 不带章节 -->
              <el-form-item v-if="!dialogModalSwitch" v-for="item in modelData" :key="item.typeName" class="form-item-flex">
                <span>{{ item.typeName }}数量</span>
                <el-input @keyup.native="provingCount(item,'count')" v-model.number="item.count" :disabled="!item.questionNum"></el-input>
                <span class="question-num">题库中{{ item.questionNum }}题</span>
                <span>每题分数</span>
                <el-input @keyup.native="proving(item,'score')" v-model.number="item.score"></el-input>
              </el-form-item>
              <div v-show="!dialogModalSwitch" class="question-left-score">试卷总分数： {{ noChapterScore }}分
              </div>
              <!-- 带章节 -->
              <el-form-item v-if="dialogModalSwitch" label="章节名称 :" class="zhangjie">
                <el-select @change="selectChange" v-model="chapterValue" placeholder="请选择章节">
                  <el-option v-for="item in chapterList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <div v-if="dialogModalSwitch" class="chapter-input-box">
                <!--左-->
                <div v-if="chapterValue">
                  <el-form-item class="form-item-flex" v-for="(item,index) in chapterModelInputData" :key="index">
                    <span>{{ item.typeName }}数量</span>
                    <el-input @keyup.native="provingCount(item,'count')" :disabled="!item.questionNum" v-model.number="item.count"></el-input>
                    <span class="question-num">题库中{{ item.questionNum }}题</span>
                    <span>每题分数</span>
                    <el-input @keyup.native="proving(chapterModelScoreData[index],'score')" v-model.number="chapterModelScoreData[index].score"></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>
          <!--右侧-->
          <div v-show="dialogModalSwitch" class="dialog-item muban-content">
            <el-scrollbar ref="scrollbar" wrap-class="list" wrap-style="" view-style="" view-class="view-box" :native="false">
              <div>
                <div class="muban-title muban-right">章节分数分配列表</div>
                <!-- 带章节 -->
                <!-- 带章节 -->
                <div v-for="(item,index) in chapterModelData" :key="item.name">
                  <div v-if="chapterScore(item.content,index)" class="muban-item muban-right">
                    <div class="muban-name" :title="item.name">{{ item.name }}</div>
                    <div class="muban-chapter-score">{{ chapterScore(item.content,index) }}分</div>
                    <div v-for="obj in item.content" :key="obj.typeName">
                      {{ filterTi(obj.typeName) }} {{ Number(obj.count) }}题
                    </div>
                  </div>
                </div>
                <div class="muban-score">试卷总分数：{{ chapterScoreNum }}分</div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="addModel">保存模板</el-button>
      </span>
    </el-dialog>
    <div class="select-content">
      <div class="btn-group text-right btn-group-top">
        <el-form class="fl" :inline="true" ref="searchForm">
          <el-form-item label="试卷名称 :">
            <el-input v-model="reqData.paperName" class="input-long"></el-input>
          </el-form-item>
          <el-form-item label="考试时间 :">
            <el-input @keyup.native="provingEx(reqData,'timeLength')" v-model="reqData.timeLength"></el-input>
          </el-form-item>
          <el-form-item label="分钟" class="form-left"></el-form-item>
        </el-form>
        <div class="fr">
          <el-tooltip class="item" effect="dark" content="按照模板定义规则生成试卷" placement="bottom">
            <i style="vertical-align: -1px;" class="iconfont icon-wenti-m c-blue fs18"></i>
          </el-tooltip>
        </div>
        <div class="button-style fr" @click="switchClick(true);dialogModal = true">添加模板</div>
        <div class="clear"></div>
      </div>
      <div class="radio-box" @change="radioChange">
        <el-radio v-model="radio" label="2">无章节模板</el-radio>
        <el-radio v-model="radio" label="1">带章节模板</el-radio>
      </div>
      <div class="modal-list">
        <!-- 带章节 -->
        <div v-if="radio == 1 && modelList.length" class="block">
          <el-carousel trigger="click" height="270px" :autoplay="false" :loop="false" indicator-position="none">
            <!-- 一个里面放俩 -->
            <el-carousel-item v-for="(item,index) in modelList" :key="index">
              <el-row :gutter="20">
                <!-- 遍历这俩 -->
                <el-col :span="12" v-for="(value,index2) in modelList[index]" :key="index2">
                  <div class="grid-content bg-purple">
                    <div @click="choseModel(value);addClass(index,index2)" :class="{active:index2==current2&&index==current}" class="look-question-content has-zhangjie">
                      <div class="look-question-title fs16 fbold text-left">章节分数分配列表</div>
                      <!-- 遍历每一章节 -->
                      <div class="look-question-hidden">
                        <div class="look-question-item2" v-for="(value3,index3) in value.content" :key="index3">
                          <div class="question-item2-title beyond-hiding" :title="value3.name">{{ value3.name }}</div>
                          <div class="question-item2-score">{{ value3.content.map(obj => obj.count*obj.score).reduce((total,num) => total+num) }}分</div>
                          <!-- 遍历章节里所有题 -->
                          <div class="question-item2-box">
                            <div class="" v-for="(value4,index4) in value3.content" :key="index4">
                              {{ value4.typeName }} {{ value4.count }} 题
                            </div>
                          </div>
                        </div>
                        <div v-if="value.content.length > 4" class="chapter-dian">...</div>
                      </div>
                      <div class="look-question-operation">
                        <a href="javascript:;" @click="showXiangQing(value)">详情</a>
                        <a href="javascript:;" @click="delModel(value)">删除</a>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div v-else-if="radio == 1 && modelList.length == 0" class="nodata-muban">
          请添加模板，模板定义系统<br/> 随机生成试题的规则或者手动选题的约束规则~
        </div>
        <!-- 不带章节 -->
        <div v-if="radio == 2 && modelList.length" class="block">
          <el-carousel :loop="false" trigger="click" height="270px" :autoplay="false" indicator-position="none">
            <!-- 一个里面放4个 -->
            <el-carousel-item v-for="(item,index) in modelList" :key="index">
              <el-row :gutter="20">
                <!-- 遍历这4个 -->
                <el-col :span="6" v-for="(value,index2) in item" :key="index2">
                  <div class="grid-content bg-purple">
                    <div @click="choseModel(value);addClass2(index2)" class="look-question-content" :class="{active:current3==index2}">
                      <!-- 遍历每种题 -->
                      <div class="look-question-item" v-for="(value3,index3) in value.content" :key="index3">
                        <div>{{ value3.typeName }}</div>
                        <div>{{ value3.count }}题</div>
                        <div>每题{{ value3.score }}分</div>
                      </div>
                      <div class="look-question-score">总分数：{{ value.score }}分</div>
                      <div class="look-question-operation">
                        <span style="color:#c0c4cc;" v-if="value.isPreset">预制</span>
                        <a v-else href="javascript:;" @click="delModel(value)">删除</a>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div v-else-if="radio == 2 && modelList.length == 0" class="nodata-muban">
          请添加模板，模板定义系统<br/> 随机生成试题的规则或者手动选题的约束规则~
        </div>
      </div>
    </div>
    <div class="btn-group text-center my-button">
      <el-button :disabled="!reqData.modelId" @click.native="setParamsData" class="button-style" style="margin-right:10px;">预 览</el-button>
      <el-button :disabled="!reqData.modelId" @click="submitEx" class="button-style" style="margin-left:0px;">保存试卷</el-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
export default {
  data() {
    return {
      //添加class
      current: -1,
      current2: -1,
      current3: -1,

      //展示
      //弹出框带章节题数
      chapterModelInputData: [],
      //弹出框带章节分数
      chapterModelScoreData: [
        {
          type: 1,
          typeName: "选择题",
          score: 0
        },
        {
          type: 2,
          typeName: "判断题",
          score: 0
        },
        {
          type: 3,
          typeName: "填空题",
          score: 0
        },
        {
          type: 4,
          typeName: "简答题",
          score: 0
        },
        // {
        //   type: 5,
        //   typeName: "编程题",
        //   score: 0
        // },
        {
          type: 6,
          typeName: "实验题",
          score: 0
        }
      ],
      //弹出框无章节题数和分数
      modelData: [
        {
          type: 1,
          typeName: "选择题",
          count: 0,
          score: 0,
          questionNum: 0
        },
        {
          type: 2,
          typeName: "判断题",
          count: 0,
          score: 0,
          questionNum: 0
        },
        {
          type: 3,
          typeName: "填空题",
          count: 0,
          score: 0,
          questionNum: 0
        },
        {
          type: 4,
          typeName: "简答题",
          count: 0,
          score: 0,
          questionNum: 0
        },
        // {
        //   type: 5,
        //   typeName: "编程题",
        //   count: 0,
        //   score: 0,
        //   questionNum: 0
        // },
        {
          type: 6,
          typeName: "实验题",
          count: 0,
          score: 0,
          questionNum: 0
        }
      ],
      //章节列表
      chapterList: [],

      //映射
      //弹出框带章节映射
      chapterModelData: [],

      xiangQing: null,
      //到选题页面传模板id，AfterSelectTemplate
      passModelInfo: "",
      //章节值
      chapterValue: "",
      //章节名称
      name: "",
      //所有模板列表
      modelList: [],
      radio: "2",
      //添加模板弹出框
      dialogModal: false,
      dialogWidth: "600px",
      //弹出框开关
      dialogModalSwitch: false,
      //章节详情弹出
      dialogXiangqing: false,
      sizeForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      reqForm: {
        isChapterModel: false
      },
      params: {
        params: this.reqForm
      },
      //添加模板请求
      addModelForm: {
        //是否带章节
        isChapterModel: true,
        //模板内容
        content: "",
        score: 0
      },

      //带章节发送数组
      modelDataTrue: [],
      //暂存章节信息
      oldChapterObj: null,
      //消息框是否开启
      //isProving:true,

      reqData: {
        //模板id
        modelId: "",
        //试卷名称
        paperName: "",
        //考试时间
        timeLength: "",
        //题目列表
        questionList: [
          {
            maxCount: 0,
            type: 1,
            typeMessage: "选择题",
            score: 0,
            questionIdList: []
          },
          {
            maxCount: 0,
            type: 2,
            typeMessage: "判断题",
            score: 0,
            questionIdList: []
          },
          {
            maxCount: 0,
            type: 3,
            typeMessage: "填空题",
            score: 0,
            questionIdList: []
          },
          {
            maxCount: 0,
            type: 4,
            typeMessage: "简答题",
            score: 0,
            questionIdList: []
          }
          // {
          //   maxCount: 0,
          //   type: 5,
          //   typeMessage: "编程题",
          //   score: 0,
          //   questionIdList: []
          // }
        ]
      },

      //自动生成试题发送项
      reqDataAuto: null
    };
  },
  computed: {
    //无章节求和
    noChapterScore() {
      let that = this;
      let modelData = that.modelData;
      return modelData
        .map(item => item.score * item.count)
        .reduce((total, num) => total + num);
    },
    //带章节求和
    chapterScoreNum() {
      let that = this;
      let sum = 0;
      let chapterModelData = that.chapterModelData;
      let chapterModelScoreData = that.chapterModelScoreData;
      if (chapterModelData.length) {
        sum = chapterModelData
          .map(item =>
            item.content
              .map(
                (item2, index2) =>
                  item2.count * chapterModelScoreData[index2].score
              )
              .reduce((total, num) => total + num)
          )
          .reduce((total, num) => total + num);
      }
      return sum;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getModel();
      this.getChapterList();
      //获取题型题目数量
      this.getQuestionNum();
    },
    //radio改变
    radioChange() {
      this.reqData.modelId = "";
      this.getModel();
    },
    //清除带章节数据
    clearChapterModelInputData() {
      let that = this;
      //清空chapterModelData
      $.each(that.chapterModelData, function(i, d) {
        d.chapterScore = 0;
        $.each(d.content, function(i2, d2) {
          d2.count = 0;
          d2.score = 0;
        });
      });
      if (that.chapterModelInputData) {
        that.chapterModelInputData.forEach((item, index) => {
          item.count = 0;
          that.chapterModelScoreData[index].score = 0;
        });
      }
      //chapterModelScoreData
    },
    //过滤题字
    filterTi(str) {
      console.log(typeof str == "string", 1);
      let result = "";
      if (str && typeof str == "string") {
        result = str.replace(/题/g, "");
      }
      return result;
    },
    //限制input框只能输入正整数
    provingCount(item, prop) {
      console.log(item.count, 88);
      let that = this;
      //限制输入数字
      console.log(item[prop], 55);
      let reg = /^[0-9]+$/;
      let isInt = reg.test(item[prop]);
      console.log(isInt, 66);
      if (!isInt) {
        item[prop] = 0;
        console.log(item[prop], 77);
        that.$message.warning("只能输入整数");
      }

      //限制不能大于题库数量
      let questionNum = item.questionNum;
      let isQuesNum = item[prop] > questionNum;
      if (isQuesNum) {
        item[prop] = 0;
        that.$message.warning("题目数量不能多于题库");
      }

      console.log(item.questionNum, 5);
    },
    //限制input框只能输入正整数
    proving(item, prop) {
      let that = this;
      let reg = /^[0-9]+$/;
      let isInt = reg.test(item[prop]);
      if (!isInt) {
        item[prop] = 0;

        //isProving为false才弹出提示框
        // if(!that.isProving){
        //   return;
        // }
        that.$message({
          type: "warning",
          message: "只能输入整数"
          // onClose:function(){
          //   that.isProving = true;
          // },
        });
        // that.isProving = false;
      }
      if (item[prop] > 100) {
        item[prop] = 0;
        that.$message({
          type: "warning",
          message: "分数不能大于100"
        });
      }
    },
    //*****弹出框*****
    //点击开关点击事件
    switchClick(val) {
      let that = this;
      //清空章节输入框
      let modelData = that.modelData;
      $.each(modelData, function(i, d) {
        d.count = 0;
        d.score = 0;
      });
      //清空章节select
      that.chapterValue = "";

      //清空带章节
      that.clearChapterModelInputData();
      //切换到带章节
      // if (val === true) {
      //   //清空不带章节
      // } else {
      // }
    },
    //
    //无章节获取题库中题数
    getQuestionNum() {
      var that = this;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/question-count"
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(res.data.data, 555);
              let questionNumList = res.data.data;
              that.setModelDataQuestionNum(questionNumList);
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //无章节后台题目数量
    setModelDataQuestionNum(questionNumList) {
      let that = this;
      let modelData = that.modelData;
      if (modelData) {
        $.each(modelData, function(i, d) {
          let obj = questionNumList.find(item2 => item2.type === d.type);
          if (obj) {
            d.questionNum = obj.count;
          }
        });
      }
    },

    //带章节
    //获取章节列表 获取题型题目数量 设置带章节模板
    getChapterList() {
      var that = this;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/businessType/1/question-repository/chapter-list"
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.chapterList = res.data.data;
              //设置带章节模板
              that.setChapterModelData(that.chapterList);
              //console.log(444);
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //设置所有章节，所有题型列表
    setChapterModelData(chapterList) {
      let that = this;
      $.each(chapterList, function(i, d) {
        let content = [
          {
            type: 1,
            typeName: "选择题",
            count: 0,
            score: 0
          },
          {
            type: 2,
            typeName: "判断题",
            count: 0,
            score: 0
          },
          {
            type: 3,
            typeName: "填空题",
            count: 0,
            score: 0
          },
          {
            type: 4,
            typeName: "简答题",
            count: 0,
            score: 0
          },
          // {
          //   type: 5,
          //   typeName: "编程题",
          //   count: 0,
          //   score: 0
          // },
          {
            type: 6,
            typeName: "实验题",
            count: 0,
            score: 0
          }
        ];
        d.chapterScore = content[0].count;
        let obj = {
          id: d.id,
          name: d.name,
          content: content,
          chapterScore: 0
        };
        that.chapterModelData.push(obj);
        console.log(that.chapterModelData, 665);
      });
    },
    //改变章节
    selectChange(val) {
      let that = this;
      //获取章节题目数量并添加至chapterModelInputData中的questionNum
      that.getChapterQuestionNum(val);
    },
    //获取章节题目数量并添加至chapterModelInputData中的questionNum
    getChapterQuestionNum(chapterId) {
      var that = this;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/question-count",
          {
            params: { chapterId: chapterId }
          }
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(res.data.data, 555);
              let questionNumList = res.data.data;
              //查找当前章节，添加对应questionNum
              that.setChapterQuestionNum(chapterId, questionNumList);
              //查找当前章节，将右侧对应索引chapterModelData映射给左侧chapterModelInputData
              that.setChapterModelInputData(chapterId);
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //设置章节题目数量
    setChapterQuestionNum(chapterId, questionNumList) {
      let that = this;
      let chapterModelData = that.chapterModelData;
      let chapterModelInputData = chapterModelData.find(
        item => item.id === chapterId
      ).content;
      console.log(chapterModelInputData, 11223344);
      if (chapterModelInputData) {
        $.each(chapterModelInputData, function(i, d) {
          let obj = questionNumList.find(item2 => item2.type === d.type);
          if (obj) {
            d.questionNum = obj.count;
          } else {
            d.questionNum = 0;
          }
        });
        console.log(chapterModelInputData, 667788);
      }
    },
    //查找当前章节，将右侧对应索引chapterModelData映射给左侧chapterModelInputData
    setChapterModelInputData(chapterId) {
      console.log(99);
      let that = this;
      let chapterModelData = that.chapterModelData;
      that.chapterModelInputData = chapterModelData.find(
        item => item.id === chapterId
      ).content;
      console.log(that.chapterModelInputData, 556677788);
    },
    //无章节过滤form
    submitFalseModel() {
      let that = this;
      //深拷贝
      let modelData = JSON.parse(JSON.stringify(that.modelData));
      //过滤空值
      let arr = modelData.filter(item => item.count != 0 && item.score != 0);

      that.addModelForm.isChapterModel = false;
      that.addModelForm.score = that.noChapterScore;
      let str = JSON.stringify(arr);
      that.addModelForm.content = str;
      console.log(str, 666656);
    },
    //带章节过滤form
    submitTrueModel() {
      let that = this;
      //let chapterModelData = [...that.chapterModelData];
      //深拷贝
      let chapterModelData = JSON.parse(JSON.stringify(that.chapterModelData));

      //过滤空数据
      let resultAll = chapterModelData.filter((item, index) => {
        let result = item.content.filter(item2 => {
          return item2.count != 0;
        });
        item.content = result;
        return item.content.length;
      });
      let chapterModelScoreData = that.chapterModelScoreData;
      if (resultAll) {
        //给题型填分
        resultAll.forEach(d => {
          d.content.forEach(item => {
            chapterModelScoreData.forEach(item2 => {
              if (item.type === item2.type) {
                item.score = item2.score;
              }
            });
          });
        });
        //给章节填总分
        resultAll.forEach(d => {
          d.score = d.content
            .map(item => item.score * item.count)
            .reduce((total, num) => total + num);
        });
      }

      that.addModelForm.isChapterModel = true;
      let str = JSON.stringify(resultAll);
      that.addModelForm.content = str;
      that.addModelForm.score = that.chapterScoreNum;
    },

    //本章分数
    chapterScore(row, index) {
      //总分
      let that = this;
      let chapterModelScoreData = that.chapterModelScoreData;
      let chapterModelData = that.chapterModelData;
      let sum = 0;
      //本章求和
      if (row) {
        sum = row
          .map(
            (item, index2) => item.count * chapterModelScoreData[index2].score
          )
          .reduce((total, num) => total + num);
      }
      return sum;
    },

    //添加模板保存
    addModel() {
      var that = this;
      let dialogModalSwitch = that.dialogModalSwitch;
      if (dialogModalSwitch) {
        that.submitTrueModel();
      } else {
        that.submitFalseModel();
      }
      //至少选择一题
      if (that.addModelForm.content === "[]") {
        that.$message.warning("请填写试题及分数");
        return;
      }
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper-model",
          that.addModelForm
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message({
                message: "添加成功",
                type: "success"
              });
              that.dialogModal = false;
              if (that.dialogModalSwitch) {
                that.radio = "1";
              } else {
                that.radio = "2";
              }
              that.getModel();
            } else {
              console.log(res);
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },

    //*****模板列表*****
    //获取所有模板 后台请求
    getModel() {
      var that = this;
      let radio = that.radio;
      let isChapterModel = "";
      if (radio == 1) {
        //带章节
        isChapterModel = true;
      } else {
        //不带章节
        isChapterModel = false;
      }
      that.passModelInfo = null;
      that.current = -1;
      that.current2 = -1;
      that.current3 = -1;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper-model",
          {
            params: { isChapterModel: isChapterModel }
          }
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(res.message);
              console.log(res.data.data, 556677);
              let modelList = res.data.data;
              $.each(modelList, function(i, d) {
                d.content = JSON.parse(d.content);
              });
              that.modelList = [];
              that.modelList = modelList;
              //带章节两个一组
              if (isChapterModel) {
                let result = that.sliceArr(modelList, 2);
                that.modelList = result;
              } else {
                //不带章节4个一组
                let result = that.sliceArr(modelList, 4);
                that.modelList = result;
              }
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //删除 后台请求
    delModel(row) {
      let that = this;
      that
        .$confirm("是否删除该模板?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          axios
            .delete(
              "/tes/course/" +
                this.$localstorage.getLocalStorage("setCourseId") +
                "/course-test/paper-model/" +
                row.id
            )
            .then(function(res) {
              console.log("成功");
              console.log(res);
              if (res.status === 200) {
                if (res.data.code === 200) {
                  that.$message({
                    message: "删除成功",
                    type: "success"
                  });
                  //刷新列表
                  that.getModel();
                } else {
                  console.log(res.data.message, 12345);
                  that.$message({
                    message: res.data.message,
                    type: "error"
                  });
                }
              }
            })
            .catch(function(err) {
              if (err.response) {
                console.log(err.response);
              }
            });
        })
        .catch(() => {});
      console.log(row);
    },

    //带章节详情
    showXiangQing(val) {
      let that = this;
      console.log(val);
      that.xiangQing = val;
      that.dialogXiangqing = true;
    },
    //分割数组arr数组，size,int分割成几个一组
    sliceArr(arr, size) {
      let result = [];
      for (let i = 0; i < arr.length; i += size) {
        result.push(arr.slice(i, i + size));
      }
      return result;
    },

    addClass(index, index2) {
      this.current = index;
      this.current2 = index2;
    },
    addClass2(index) {
      this.current3 = index;
    },
    //点击模板,赋值模板信息
    choseModel(row) {
      this.passModelInfo = row;
      this.reqData.modelId = row.id;
      this.reqData.score = row.score;
    },

    //
    //限制input框只能输入正整数
    provingEx(item, prop) {
      let that = this;
      //限制输入数字
      console.log(item[prop], 55);
      let reg = /^[0-9]+$/;
      let isInt = reg.test(item[prop]);
      console.log(isInt, 66);
      if (!isInt) {
        item[prop] = "";
        console.log(item[prop], 77);
        that.$message.warning("只能输入数字");
      }
      //限制不能大于120
      let isQuesNum = item[prop] > 120 || item[prop] < 1;
      if (isQuesNum) {
        item[prop] = "";
        that.$message.warning("考试时间为1-120分钟");
      }
      //限制不能大于题库数量
    },
    //过滤自动发送信息
    filterReqDataAuto() {
      let that = this;
      console.log(332211);
      let reqData = that.reqData;
      let reqDataAuto = {
        modelId: reqData.modelId,
        paperName: reqData.paperName,
        timeLength: reqData.timeLength,
        score: reqData.score
      };
      that.reqDataAuto = reqDataAuto;
      //验证
      if (!reqDataAuto.paperName) {
        that.$message.warning("请填写考试名称");
        return;
      }

      if (reqDataAuto.paperName.length > 20) {
        that.$message.warning("考试名称不能超过20字");
        return;
      }

      if (!reqDataAuto.timeLength) {
        that.$message.warning("请填写考试时间");
        return;
      }

      if (!reqDataAuto.modelId) {
        that.$message.warning("请选择模板");
        return;
      }
      return true;
    },

    //预览试卷
    setParamsData() {
      let that = this;
      if (!that.filterReqDataAuto()) {
        return;
      }
      let reqDataAuto = that.reqDataAuto;
      //本地存储
      let storage = window.localStorage;
      reqDataAuto = JSON.stringify(reqDataAuto);
      storage.setItem("previewPaperData", reqDataAuto);
      //新窗口打开
      let routerData = that.$router.resolve({
        path: `/PreviewTestPaper/`
      });
      window.open(routerData.href, "_blank");
    },
    //保存试卷
    submitEx() {
      let that = this;
      if (!that.filterReqDataAuto()) {
        return;
      }
      const loading = that.$loading({
        lock: true,
        text: "正在保存中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let reqDataAuto = that.reqDataAuto;
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/no-preview",
          reqDataAuto
        )
        .then(function(res) {
          loading.close();
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              let modelList = res.data.data;
              that.$message({
                message: "保存试卷成功",
                type: "success"
              });
              that.$router.push({ path: "ExaminationList" });
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //选择模板跳转页面
    goNextPage() {
      let that = this;
      let passModelInfo = that.passModelInfo;
      if (passModelInfo) {
        if (that.radio == 1) {
          //带章节模板
          that.$router.push({
            path: "/Teaching/MyCourses/Examination/afterSelectTemplateChapter",
            name: "AfterSelectTemplateChapter",
            params: { row: passModelInfo }
          });
        } else {
          //不带章节模板
          that.$router.push({
            path:
              "/Teaching/MyCourses/Examination/afterSelectTemplateNoChapter",
            name: "AfterSelectTemplateNoChapter",
            params: { row: passModelInfo }
          });
        }
      } else {
        that.$message.error("请选择模板");
      }
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#auto-select-template {
  .muban-right {
    margin-right: 40px;
  }
  .form-left label {
    text-align: left;
  }
  .input-long .el-input__inner {
    width: 200px;
  }
  .block {
    overflow-y: hidden;
  }
  width: 1200px;
  margin: 0px auto 30px;
  padding: 30px 10px;
  .btn-group-top {
    padding: 0px 70px 0;
  }
  .radio-box {
    text-align: center;
  }
  .select-content {
    .button-style {
      margin-right: 10px;
    }
    a {
      vertical-align: middle;
    }
    .modal-list {
      padding: 30px 0;
      .el-row {
        padding: 0 70px;
      }
      .look-question-content {
        cursor: pointer;
        color: #727272;
        position: relative;
        // width: 280px;
        height: 270px;
        padding: 20px 34px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e8e8e8;
        .look-question-hidden {
          position: relative;
          height: 150px;
          overflow: hidden;
        }
        .look-question-title {
          border-bottom: 2px solid #e8e8e8;
          padding-bottom: 10px;
        }
        .look-question-item {
          display: flex;
          justify-content: space-between;
          line-height: 32px;
          border-bottom: 1px solid #e8e8e8;
          padding: 0 6px;
          font-size: 14px;
        }
        .look-question-item2 {
          display: flex;
          // justify-content: space-between;
          line-height: 32px;
          border-bottom: 1px solid #e8e8e8;
          padding: 0 6px;
          font-size: 14px;
          .question-item2-title {
            min-width: 100px;
            max-width: 100px;
          }
          .question-item2-score {
            min-width: 48px;
            margin-right: 0;
          }
          .question-item2-box {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            > div {
              display: inline-block;
              padding-left: 10px;
            }
          }
          > div {
            margin-right: 10px;
          }
        }
        .look-question-score {
          font-size: 14px;
          text-align: left;
          padding-right: 8px;
          line-height: 50px;
        }
        .look-question-operation {
          position: absolute;
          bottom: 0;
          font-size: 14px;
          text-align: left;
          line-height: 50px;
          padding-right: 8px;
        }
      }
      .look-question-content.has-zhangjie {
        .look-question-item {
          line-height: 38px;
        }
        .look-question-hidden {
          position: relative;
          .chapter-dian {
            position: absolute;
            bottom: -5px;
            left: 0px;
            padding-left: 7px;
            width: 100%;
            background: #fff;
          }
        }
      }
      .look-question-content.active {
        border-color: $btn-blue;
        &:after {
          font-family: "iconfont";
          content: "\e614";
          color: rgb(63, 219, 155);
          position: absolute;
          right: 10px;
          bottom: 0px;
        }
      }
      .look-question-content:hover {
        border-color: $btn-blue;
      }
    }
  }
  .upload-file {
    margin: 10px 0 0 0;
    .iconfont {
      font-size: 24px;
      vertical-align: sub;
      color: $blue;
      margin: 0 0 0 10px;
    }
  }
  .btn-group {
  }
  .dialog-modal {
    .dialog-content {
      padding: 0 16px;
      .switch-box {
        position: relative;
        margin-bottom: 24px;
        .is-active {
          color: #474747;
        }
      }
      .switch-box-true {
        margin-left: 30px;
      }
      .dialog-box {
        display: flex;
        justify-content: space-between;
        .dialog-item {
          width: 540px;
          height: 300px;
          background: #fff;
          box-sizing: border-box;
          border: 1px solid #fff;
          .el-input {
            width: auto;
          }
          .el-input__inner {
            width: 80px;
          }
          .form-item-flex {
            margin-bottom: 12px;
            .el-form-item__content {
              display: flex;
              justify-content: space-between;
            }
          }
          .question-num {
            color: #c5c5c5;
            width: 76px;
          }
          .muban-title {
            font-size: 16px;
            font-weight: bold;
            border-bottom: 2px solid #e8e8e8;
            padding-bottom: 10px;
          }
          .muban-score {
            font-size: 16px;
            font-weight: bold;
            // text-align: center;
            color: $blue;
            line-height: 70px;
          }
          .question-left-score {
            font-size: 16px;
            font-weight: bold;
            // text-align: center;
            color: $blue;
            line-height: 46px;
            padding: 20px 0 0 28px;
          }
          .muban-item {
            display: flex;
            line-height: 52px;
            border-bottom: 1px solid #e8e8e8;
            > div {
              margin-left: 10px;
            }
            .muban-name {
              margin-left: 0;
              min-width: 140px;
              max-width: 140px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .muban-chapter-score {
              min-width: 48px;
              max-width: 48px;
            }
          }
        }
        .muban-content {
          width: 760px;
          height: 300px;
          padding: 20px 0px 0 40px;
          overflow: hidden;
          border-color: #e8e8e8;
          .list {
            max-height: 300px;
          }
        }
        .dialog-item.item-bg {
          border-color: #e8e8e8;
        }
        .zhangjie {
          margin: 10px 0 22px 20px;
          .el-input__inner {
            width: 180px;
          }
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
      padding: 10px 20px 36px;
    }
  }
  //chapter-details
  .dialog-chapter-details {
    .dialog-content {
      padding: 0 16px;
      .switch-box {
        position: relative;
        margin-bottom: 24px;
        .is-active {
          color: #474747;
        }
      }
      .switch-box-true {
        margin-left: 30px;
      }
      .dialog-box {
        display: flex;
        .dialog-item {
          height: 400px;
          background: #fff;
          box-sizing: border-box;
          border: 1px solid #fff;
          .el-input {
            width: auto;
          }
          .el-input__inner {
            width: 80px;
          }
          .form-item-flex {
            margin-bottom: 12px;
            .el-form-item__content {
              display: flex;
              justify-content: space-between;
            }
          }
          .question-num {
            color: #c5c5c5;
            width: 76px;
          }
          .muban-title {
            font-size: 16px;
            font-weight: bold;
            border-bottom: 2px solid #e8e8e8;
            padding-bottom: 10px;
          }
          .muban-score {
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            color: $blue;
            line-height: 70px;
          }
          .question-left-score {
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            color: $blue;
            line-height: 46px;
          }
          .muban-item {
            display: flex;
            line-height: 52px;
            border-bottom: 1px solid #e8e8e8;
            > div {
              margin-left: 10px;
            }
            .chapter-details-name {
              min-width: 220px;
              max-width: 220px;
              margin-left: 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .chapter-details-score {
              width: 44px;
            }
          }
        }
        .muban-content {
          width: 100%;
          padding: 20px 40px 0;
          border-color: #e8e8e8;
        }
        .dialog-item.item-bg {
          border-color: #e8e8e8;
        }
        .zhangjie {
          margin: 10px 0 22px 20px;
          .el-input__inner {
            width: 180px;
          }
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
      padding: 10px 20px 36px;
    }
  }
}
</style>
